<template>
  <div class="PaSeas">
    <h2>患者公海</h2>

    <div class="operatingBox">
      <div class="operating">
        <el-button type="primary" icon="el-icon-share" size="small" @click="allocationPaDep">分配</el-button>
        <download-excel style="display: inline-block; margin-left: 10px;" :data="tableData" :fields="json_fields"
          :header="headers" :name="name">
          <el-button type="success" icon="el-icon-upload" size="small">导出</el-button>
        </download-excel>
      </div>
      <div class="operating">
        <el-input placeholder="请输入内容" v-model="input1" class="input-with-select">

          <el-button slot="append" icon="el-icon-search" @click="searchSeasPa"></el-button>
        </el-input>
      </div>
    </div>

    <div class="tab-content">
      <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="50">
        </el-table-column>
        <!-- <el-table-column label="选择" width="55">

        </el-table-column> -->
        <el-table-column prop="name" label="患者名称" width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
          <template slot-scope="scope">
            <div disable-transitions type="success" v-if="scope.row.sex == 0">女</div>
            <div disable-transitions type="info" v-if="scope.row.sex == 1">男</div>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80">
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" width="120">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号码" width="180">
        </el-table-column>
        <el-table-column prop="medicareNum" label="医保卡号" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省市" width="120">
        </el-table-column>
        <el-table-column prop="address" label="详细地址" width="120" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="userName" label="负责人" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120">
        </el-table-column>
        <el-table-column prop="updateTime" label="跟进" width="120">
        </el-table-column>
        <!-- <el-table-column prop="case" label="病例" width="120"> -->
        <!-- </el-table-column> -->
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag disable-transitions type="success" v-if="scope.row.status == 0">有效</el-tag>
            <el-tag disable-transitions type="info" v-if="scope.row.status == 1">无效</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="operation" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-s-home" size="mini"  @click="receiveSeasPa(scope.row)" :disabled="scope.row.status == 1">领取</el-button>

          </template>
        </el-table-column>
      </el-table>

      <div class="block">

        <!-- 分页器 -->
        <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination"></Pagination>
      </div>
    </div>



    <!-- 分配dialog -->
    <el-dialog :visible.sync="dialogFormVisible" width="30%">
      <el-form>
        <el-form-item>
          <span slot="label">
            <span class="labelText">部门</span>
          </span>
          <el-select v-model="depData.department" placeholder="--请选择部门--" style="width: 100%;">
            <!-- <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>-->
            <el-option v-for="item in formData" :value="item.depId" :label="item.depName" :key="item.depId"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <span class="labelText">人员</span>
          </span>
          <el-select v-model="depData.personId" style="width: 100%;" @focus="getDepartmentPer">
            <!-- <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option> -->
            <el-option v-for="item in personData" :value="item.id" :label="item.realName" :key="item.id"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="allocationSeasPa">转交</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  name: '',
  components: {
    Pagination
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      //加载
      loading: true,

      //导出的表格数据
      // json_data:{

      // },
      //表头对应的数据属性
      json_fields: {
        "类型": "type",
        "患者名称": "name",
        "性别": "sex",
        "年龄": "age",
        "手机号码": "phone",
        "身份证号码": "idCard",
        "医保卡号": "medicareNum",
        "详细地址": "address",
        "负责人": "userName",
        "创建时间": "createTime",
        // "病例": "sysDiagnosislist",
        "状态": "status",
      },
      //表格抬头的名字
      headers: "公海患者管理表格",
      //表格名称
      name: "公海患者管理列表",

      //分配dialog是否打开
      dialogFormVisible: false,


        
      

      //分配dialog 数据内容
      depData:{
        department:"",//部门Id
        personId:"",//部门用户id
      },

    
      //部门所有信息
      formData: {
        depId: "",//部门id
        depName: "",//部门名称
        depPho: "",
      },
    
      //部门人员 所有信息
      personData:{

      },


      //分配 提交的数据内容
      allocationData: {
        "patientIds": [],//患者id数组
        "userId": 1,//部门id
      },

      //领取的数据内容传参
      receiveData:{
        patientId:1,
        userId:sessionStorage.getItem("userID"),
      },
      

      //搜索框的内容
      input1: "",
      searchData: {
        name: "",
        currentPage: 1,
        pageSize: 10,
      },

      //表格数据
      tableData: [{
        id: "1",
        type: "私海",
        name: "小",
        sex: "女",
        age: "6",
        phone: "123",
        idCard: "12342",
        medicareNum: "456",
        province: "北京",
        address: "北京",
        responsible: "111",
        createTime: "2022",
        updateTime: "",
        sysDiagnosislist: "",
        status: "有效",
        userId: sessionStorage.getItem("userID"),

      }],

      //多选的值
      multipleSelection: [],

      //表格的内容量共有几条
      total: 0,
      currentPage: 1,
      pageSize: 10,
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.getAllSeasPatientsList(this.currentPage, this.pageSize);
  },
  mounted() {

  },
  methods: {

    //获取页码
    getPagination(page) {
      this.currentPage = page;
      this.searchData.currentPage = page
      this.getAllSeasPatientsList(this.currentPage, this.pageSize)
    },

    //获取公海患者列表
    async getAllSeasPatientsList(currentPage, pageSize) {
      let res = await this.$api.patients.getPaSeas({ currentPage, pageSize });
      // console.log(res);
      // console.log(res.data.code);
      if (res.data.code === 200) {
        console.log(res.data.data.list);
        this.tableData = res.data.data.list;
        this.total = res.data.data.total
        //加载loading
        
        this.loading = false

      } else {
        this.loading=true;
        setTimeout(()=>{
          this.loading = false
        },1000)
        this.tableData = [];
        this.total = 1;
        this.pageSize = 0
      }
    },


    //分配患者  获取部门
    allocationPaDep() {
      this.depData.department="";//部门Id
      this.depData.personId="";//部门人员id
      this.dialogFormVisible = true;
      this.$api.patients.getPaDepartment()
        .then((res) => {
          // console.log(res.data.data);
          this.formData = res.data.data
          console.log(this.formData);
        })
        
    },
    
    //获取部门人员
    async getDepartmentPer(){
      // console.log(this.depData.department);
      let depId=this.depData.department;//部门id   传参
      let res=await this.$api.patients.getDepartmentPerson(depId)
      // console.log(res);
      if(res.data.code===200){
         this.personData=res.data.data;
         console.log(this.personData);
      }
    },
    //分配患者
    async allocationSeasPa(){
      this.dialogFormVisible = false
     
      //  console.log(this.allocationData.patientIds);//患者id数组
       this.allocationData.userId=this.depData.personId;//部门人员id
      //  console.log(this.allocationData.userId);
      
       if(this.allocationData.patientIds.length>0){
        // console.log(this.allocationData);//传参
        let res=await this.$api.patients.allocationSeas(this.allocationData)
          // console.log(res);
        if(res.data.code===200){
          this.getAllSeasPatientsList(this.currentPage, this.pageSize)
           this.$message({
              type: 'success',
              message: '分配成功!'
            });
        }else{
          this.$message.error('分配失败');
        }
       }else{
        this.$message.error('分配失败，必须选择患者');
       }
    },

    //搜索患者
    async searchSeasPa() {
      this.searchData.name = this.input1;
      // console.log(this.searchData);
      let res = await this.$api.patients.searchSeasPa(this.searchData)
      // console.log(res);
      if (res.data.code === 200) {
        // console.log(res.data.data.list);
        this.tableData = res.data.data.list;
        this.total = res.data.data.total
        //加载loading
        this.loading = false

      } else {
        this.tableData = [];
        this.total = 1;
        this.pageSize = 0
      }
   
    },

    //领取患者
     async receiveSeasPa(row) {
      // console.log(row.status);
      //需要传参   患者id数组 获取当前行
      this.$confirm('确定领取该患者吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        // console.log(row);
        this.receiveData.patientId=row.id
        // console.log(row.status);
      
        this.$api.patients.receiveSeas(this.receiveData.patientId,this.receiveData.userId)
        .then(()=>{
          this.getAllSeasPatientsList(this.currentPage, this.pageSize);
          this.$message({
              type: 'success',
              message: '领取成功!'
            });
        })
        .catch(() => {
            this.$message.error('领取失败');
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消领取'
        });
      })
      
    },


    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.allocationData.patientIds=[];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        
        //获取多选框选中的患者id  
        this.allocationData.patientIds.push(Number(this.multipleSelection[i].id))
      }

      
      // console.log( this.allocationData.patientIds);
    },

  }
};
</script>
<style  scoped>
h2 {
  margin: 15px;

}

.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-input {
  width: 200px;
}

.tab-content {
  margin: 10px;
}
</style>